<!--
 * @Date: 2022-11-17 11:25:05
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-17 11:34:59
 * @FilePath: \vue-admin-ts\src\views\main\components\NavHeader\components\userInfo.vue
 * @Description: 用户下拉菜单
-->
<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar :size="30" :src="circleUrl" class="avatar" />
      {{ name }}
      <el-icon class="el-icon--right">
        <i-ep-arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>系统管理</el-dropdown-item>
        <el-dropdown-item>用户信息</el-dropdown-item>
        <el-dropdown-item>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts" setup>
import { useStore } from "@/store";
import { computed, ref } from "vue";
const store = useStore();
const circleUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
);
const name = computed(() => store.state.loginModule.userInfo.name);
</script>
<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  .avatar {
    margin-right: 10px;
  }
}
</style>
